import React from 'react'
import { Outlet, useNavigate, } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import './Bpp.css';

import {
    ShoppingCartOutlined
} from '@ant-design/icons';
import {
    AppOutline,
    UnorderedListOutline, UserOutline,
} from 'antd-mobile-icons';

export default function Bpp() {

    const navigate = useNavigate();

    // const setRouteActive = (value) => {
    //     navigate(value);
    // };

    const tabs = [
        {
            key: '/bpp/home',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/bpp/classify',
            title: '分类',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/bpp/shop',
            title: '购物车',
            icon: <ShoppingCartOutlined />
        },
        {
            key: '/bpp/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ];
    // const [activeKey, setActiveKey] = useState('todo');

    return (
        <div className='bpp'>
            {/* activeKey={pathname} onChange={value => setRouteActive(value)} */}
            <Outlet></Outlet>
            <div className='bottom-tab-bar'>
                <TabBar onChange={(key)=>{ navigate(key) }} >
                    {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
                </TabBar>
            </div>
        </div>
    )
}
